@import 'src/'

.wrapper
    position: absolute
    z-index: 10
    left: 10%
    width: 100vw
    height: 100vh
    animation: wrapperAn .1s ease-out
    background-color: rgba(0, 0, 0, 0.5)

.wrapperNotMask
    position: absolute
    z-index: 10
    left: 0
    top: 0
    width: 0
    height: 0

@keyframes wrapperAn
    0%
        background-color: rgba(0, 0, 0, 0)
    100%
        background-color: rgba(0, 0, 0, 0.5)

.content
    position: absolute
    display: flex
    flex-direction: column
    background-color: #fff
    border-radius: 10px
    overflow: hidden
    animation: contentAn .1s ease-out

@keyframes contentAn
    0%
        transform: scale(0.95, 0.95)
    100%
        transform: scale(1, 1)

.contentDefault
    @extend .content
    top: 5vh
    left: 5vw
    width: 90vw
    height: 90vh

.contentMiddle
    @extend .content
    top: 15vh
    left: 15vw
    width: 70vw
    height: 70vh

.contentSmall
    @extend .content
    top: 20vh
    left: 25vw
    width: 50vw
    height: 50vh

.contentMini
    @extend .content
    top: 25vh
    left: 35vw
    width: 30vw
    height: 30vh

.contentAuto
    @extend .content
    left: 50vw
    top: 50vh
    animation: contentAutoAn .1s ease-out
    transform: translate(-50%, -50%)

@keyframes contentAutoAn
    0%
        transform: translate(-50%, -50%) scale(0.95, 0.95)
    100%
        transform: translate(-50%, -50%) scale(1, 1)

.header
    display: flex
    height: 50px
    line-height: 50px
    font-size: 18px

.littleHeader
    display: flex
    height: 30px
    line-height: 30px
    font-size: 16px

.title
    flex: 1
    text-indent: 10px
    font-weight: 500
    color: $heading-color

.closeButton
    width: 50px
    height: 100%

.body
    flex: 1
    overflow-x: hidden
    overflow-y: auto
